<!-- 顶部导航栏 -->
<?php 
    $nav_background_color = request()->pc_info['nav_background_color']
?>
<div class="layui-header">
    <div class="layui-container" style="padding: 0px;">
        <div class="layui-logo">
            <a class="logo" href="/">
                <img src="{:request()->pc_info['nav_logo']}" alt="layui">
            </a>
        </div>
        <ul class="layui-nav layui-header-menu layui-layout-left" id="mainNav">
            <li class="layui-nav-item {if request()->controller() == 'Index'}layui-this{/if}">
                <a href="javascript:;" layui-href="/">首页</a> 
            </li>
            {foreach :request()->pc_info['nav_list'] as $v}
            <li class="layui-nav-item {if request()->controller() == $v.controller}layui-this{/if}">
                <a href="javascript:;" layui-href="/{$v.href}">{$v.name}</a> 
            </li>
            {/foreach}
            <span class="layui-nav-bar" style="left: 92px; width: 0px; opacity: 0; top: 57px;"></span>
        </ul>
        <ul class="layui-nav layui-header-menu layui-layout-right">
            <li class="layui-nav-item">
                <a href="/search/index">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" id="applet-qrocde">
                    <i class="layui-icon layui-icon-cellphone"></i> 小程序
                </a>
            </li>
            <li class="layui-nav-item lay-unselect" style="max-width: 190px;">
                {if !session('user.id')}
                    <a href="javascript:;" user-login >登录<span lay-separator="" style="margin: 5px;color:#c2c2c2;">/</span>注册</a>
                {else}
                    <a href="javascript:;" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 20px 0 10px;">
                        <img src="{:session('user.avatar')}" class="layui-nav-img" style="width: 40px;height: 40px;margin-right: 5px;">
                        <span>{:session('user.nickname_two')}</span>
                    </a>
                    <dl class="layui-nav-child layui-nav-child-c">
                        <dd>
                            <a href="javascript:;" layui-href="/user/course"><i class="iconfont icon-wodekecheng1 margin-right-10"></i>我的课程</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" layui-href="/user/order"><i class="iconfont icon-dingdan margin-right-10"></i>我的订单</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" layui-href="/user/info"><i class="iconfont icon-yonghu margin-right-10"></i>个人资料</a>
                        </dd>
                        <dd>
                            <hr>
                        </dd>
                        <dd>
                            <a href="javascript:;" class="login-out"><i class="iconfont icon-tuichudenglu1 margin-right-10"></i>退出登录</a>
                        </dd>
                    </dl>
                {/if}
            </li>
        </ul>
    </div>
</div>
<!-- 小程序二维码 -->
<div class="nav-qrocde-hover" style="display: none;">
    <div class="qrocde-info">
        <div class="qrcode">
            <img style="display: block;width: 150px;margin: 0 auto;" src="{:request()->pc_info['applet_qrcode']}">
        </div>
        <p style="text-align: center;font-size:14px;color:#999;margin-top: 15px;">扫码使用微信小程序</p>
    </div>
</div>
<script type="text/javascript">
    layui.use(['jquery', 'layer', 'form'],function(){
        var util = layui.util, element = layui.element, $ = layui.jquery;

        let bgColor = "{:request()->pc_info['nav_background_color']}"
        let fontColor = "{:request()->pc_info['nav_font_color']}"
        
        // 设置导航栏背景色
        $('.layui-header').css('background-color', bgColor);   
        // 设置导航栏字体颜色
        $('.layui-header .layui-nav *').css('color', fontColor);
        
        // 打开导航栏
        $('body').on('click', '[layui-href]', function () {
            var loading = layer.load(0, {shade: false, time: 1 * 1000});
            var href = $(this).attr('layui-href'),
                target = $(this).attr('target');
            if(!href) return  ;
            var el = $("[layui-href='"+href+"']");
            if(el.length){
                $(el).closest("#mainNav").find(".layui-this").removeClass("layui-this");
                $(el).parent().addClass("layui-this");
            }
            if (target === '_blank') {
                layer.close(loading);
                window.open(href, "_blank");
                return false;
            }
            location.href = href;
            layer.close(loading);
        });

        //鼠标悬浮
        $(document).on("mouseenter", "#applet-qrocde", function () {
            layer.tips($(".nav-qrocde-hover").html(), '#applet-qrocde', {
                tips: [1, '#fff'],
                area: ['230px', 'auto'],
                time: 300000,
            });
        }).on("mouseleave", "#applet-qrocde", function () {
            //鼠标离开
            layer.closeAll();
        });

        // 登录
        $('body').on('click', '[user-login]', function () {
            var user_id = "{:session('user.id')}";
            if (!user_id) {
                open_login();
            }
        })

        // 用户登录
        window.open_login = function () {
            var index = layer.open({
                skin: 'layui-layer-untitle-radius', // 弹窗主题样式
                offset: 'auto',
                title: false,
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                closeBtn: 0,
                shadeClose: true,
                area: ['430px', '485px'],
                content: '/login/index'
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        }

        // 退出登录
        $('.login-out').on("click", function () {
            var loading = layer.load();
            $.ajax({
                url:'/login/login_out',
                type:'post',
                data:{},
                dataType:"JSON",
                success:function(res){
                    layer.close(loading);
                    if(res.code == 0){
                        layer.msg(res.msg,{icon: 1,time:1500},function(){
                            location.reload();
                        });
                    }else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.close(loading);
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
        });

        //控制字数
        window.wordLength = function(obj) {
            var currleg = $("#"+obj.id).val().length;
            var length = $("#"+obj.id).attr('maxlength');
            if (currleg > length) {
                layer.msg('字数请在' + length + '字以内',{icon: 2});
            } else {
                $('.'+'a'+obj.id).text(currleg);
            }
        }

        // 鼠标悬浮 查看图片
        $('body').on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").css('display', 'flex');
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        // 删除图片
        $('body').on("click", ".file-iteme .layui-icon-delete", function(event){
            $(this).parent().parent().remove();  
        });

        // 放大图片
        $('body').on('click', '.file-iteme .layui-icon-eye', function () {
            var title = $(this).attr('data-image'),
                src = $(this).data('src'),
                alt = $(this).attr('alt');
            var photos = {
                "title": title,
                "id": Math.random(),
                "data": [
                    {
                        "alt": alt,
                        "pid": Math.random(),
                        "src": src,
                        "thumb": src
                    }
                ]
            };
            layer.photos({
                photos: photos,
                anim: 5
            });
            return false;
        });

        // 点击放大图片
        $('body').on('click', '[data-image]', function () {
            var title = $(this).attr('data-image'),
                src = $(this).attr('src'),
                alt = $(this).attr('alt');
            var photos = {
                "title": title,
                "id": Math.random(),
                "data": [
                    {
                        "alt": alt,
                        "pid": Math.random(),
                        "src": src,
                        "thumb": src
                    }
                ]
            };
            layer.photos({
                photos: photos,
                anim: 5
            });
            return false;
        });

        // input框限制只能输入数字
        $('input.positive-integer').on('input', function(){
            var value = $(this).val();
            // 只保留数字
            value = value.replace(/[^\d]/g, '');
            // 确保不以0开头（除非就是0）
            if(value.length > 1 && value.charAt(0) === '0'){
            value = value.substring(1);
            }
            $(this).val(value);
        });
    });
</script>